<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="/static/js/haha.js"></script>
		<style>
			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 178px;
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-input v-model="query.name" placeholder="请输入姓名"></el-input>
			<el-input v-model="query.minAge" placeholder="请输入最小年龄"></el-input>
			<el-input v-model="query.maxAge" placeholder="请输入最大年龄"></el-input>
			<el-button icon="el-icon-search" @click="search" circle></el-button>
			<el-button icon="el-icon-check" @click="showAdd" circle></el-button>
			<el-table :data="stuarr" stripe style="width: 100%">
				<el-table-column prop="id" label="编号" width="180">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="address" label="地址">
				</el-table-column>
				<el-table-column label="年龄">
					<template slot-scope="scope">
						<span v-if="scope.row.age > 18 " style="color: red">{{scope.row.age }}</span>
						<span v-else style="color: green">{{scope.row.age }}</span>
					</template>
				</el-table-column>
				<el-table-column label="头像">
					<template slot-scope="scope">
						<img v-bind:src="scope.row.headImg" width="30" height="40" alt="" />
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="text" size="small">删除</el-button>
						<el-button type="text" size="small">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @current-change="handleCurrentChange" :page-size="5" layout="total, prev, pager, next"
				:total="totalCount">
			</el-pagination>

			<el-dialog :visible.sync="dialogVisible" title="添加学生信息">

				<el-form :model="studentForm" :rules="rules" ref="studentFormRef" label-width="100px">
					<el-form-item label="姓名" prop="name">
						<el-input v-model="studentForm.name"></el-input>
					</el-form-item>
					<el-form-item label="年龄" prop="age">
						<el-input v-model.number="studentForm.age" type="number"></el-input>
					</el-form-item>
					<el-form-item label="地址" prop="address">
						<el-input v-model="studentForm.address"></el-input>
					</el-form-item>
					<el-form-item label="班级" prop="class">
						<el-input v-model="studentForm.class"></el-input>
					</el-form-item>
					<el-form-item label="头像" prop="headImg">
						<el-upload class="avatar-uploader" action="http://172.16.9.70:8080/ssm/upload"
							:with-credentials="true" :multiple="false" :show-file-list="false"
							:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img v-if="studentForm.headImg" :src="studentForm.headImg" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-form>

				<template #footer>
					<span class="dialog-footer">
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="submitForm('studentFormRef')">确定</el-button>
					</span>
				</template>
			</el-dialog>
		</div>

		<script>
			function getData(pageNo, pageCount) {
				app.query.pageNo = pageNo;
				app.query.pageCount = pageCount;
				$.post(BASE_URL + "/stu/listStudent", app.query, function(backData) {
					app.stuarr = backData.data.currentData;
					app.totalCount = backData.data.total;
				});
			}

			var app = new Vue({
				el: "#app",
				data: {
					query: {},
					dialogVisible: false,
					stuarr: [],
					totalCount: 0,
					studentForm: {
						headImg: null
					},
					rules: {
						name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						}],
						age: [{
								required: true,
								message: '请输入年龄',
								trigger: 'blur'
							},
							{
								type: 'number',
								message: '年龄必须为数字值',
								trigger: 'blur'
							}
						],
						address: [{
							required: true,
							message: '请输入地址',
							trigger: 'blur'
						}],
						class: [{
							required: true,
							message: '请输入班级',
							trigger: 'blur'
						}]
					}
				},
				methods: {
					submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								$.post(BASE_URL+"/stu/add",app.studentForm,function(backData){
									app.$message.error('tianjiachengg');
									app.dialogVisible = false;
								})

							}
						});
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					showAdd() {
						this.dialogVisible = true;
					},
					search() {
						getData(1, 5);
					},
					handleCurrentChange(val) {
						getData(val, 5);
					},
					handleAvatarSuccess(res, file) {
						this.studentForm.headImg = res.data;
					},
					beforeAvatarUpload(file) {
						const isJPG = file.type === 'image/png';
						const isLt2M = file.size / 1024 / 1024 < 2;

						if (!isJPG) {
							this.$message.error('上传头像图片只能是 JPG 格式!');
						}
						if (!isLt2M) {
							this.$message.error('上传头像图片大小不能超过 2MB!');
						}
						return isJPG && isLt2M;
					}
				}
			});
			getData(1, 5);
		</script>

	</body>
</html>